<template>
    <view class="page">
        <wxTopStatus></wxTopStatus>
        <view class="box p-[30rpx]">
            <userConcern
                :info="{
                    ...info,
                    typeKey: 2
                }"
                @reGetData="getDetail(info.id)"
                typeKey="shoType"
            ></userConcern>

            <view class="content flex-column gap-[30rpx]">
                <view class="desc"> {{ info.desc }} </view>
                <view class="prod-params flex-column gap-[20rpx]" v-if="info.categoryPath">
                    <view class="p-item flex-row gap-[30rpx]">
                        <view class="i-label">分类 </view>
                        <view class="i-value">{{ info.categoryPath }}</view>
                    </view>

                    <view class="p-item flex-row gap-[30rpx]" v-if="info.volume">
                        <view class="i-label">体积 </view>
                        <view class="i-value">{{ info.volume }}</view>
                    </view>

                    <view class="p-item flex-row gap-[30rpx]" v-if="info.style.length > 0">
                        <view class="i-label"> 风格 </view>
                        <view class="i-value gap-[10rpx]">
                            <text v-for="(t, i) in info.style" :key="i">{{ t }}</text>
                        </view>
                    </view>
                </view>

                <view class="img">
                    <image mode="widthFix" :src="info.pic"></image>
                </view>

                <view class="time"> 发表于 {{ info.createTime }} </view>
            </view>
            <view class="footer">
                <ForumFooter
                    @share="shareFn"
                    @showComment="showComment"
                    :item="info"
                    type="0"
                ></ForumFooter>
                <fui-safe-area></fui-safe-area>
            </view>
        </view>
        <Comment type="1" ref="commentREF"></Comment>
        <shareCom ref="shareREF" @clickShare="clickShare"></shareCom>
    </view>
</template>
<script lang="ts" setup>
import { prodDetail } from '@/api/home'
import ForumFooter from '@/components/forumList/forumFooter.vue'
import userConcern from '../../components/detaiConcern/index.vue'
import Comment from '@/components/forumList/comment.vue'
import { userActionAPI } from '@/api/common'
onLoad((op) => {
    if (op!.id) {
        console.log('23232', op)
        addView(op!.id)
        getDetail(op!.id)
    }
})

const commentREF = ref()
const shareREF = ref()
//  展示分享
const shareFn = (row: any) => {
    console.log(info)
    shareREF.value.shareFn(row)
}
const info = ref({})

const getDetail = async (id: string) => {
    console.log('请求详情', id)

    const res = await prodDetail(id)

    if (res.code === 0) {
        info.value = res.data
    }
    console.log(res.data)
}

onShareAppMessage((res) => {
    console.log(res, 12313)

    return {
        title: info.value.shop.name + '发布了新产品', //分享标题
        path: '/views/subViews/findProduct/productDetail/index?id=' + info.value.id, // 可不填 传递的参数，只能是这', // 可不填 传递的参数，只能是这
        imageUrl: info.value.pic || '' //封面图
    }
})

// 显示评论
const showComment = (val) => {
    console.log(val)
    commentREF.value.showComment(val.id)
}

// 添加产品浏览量
const addView = async (id: string) => {
    const res = await userActionAPI({
        type: 5,
        action: 50,
        bindId: id
    })
}
</script>

<style lang="scss" scoped>
.box {
    .content {
        padding: 30rpx 0 0;
        .prod-params {
            background-color: #f7f9ff;
            border-radius: 20rpx;
            padding: 20rpx;
            .p-item {
                .i-label {
                    color: #999999;
                }
                .i-value {
                    color: #666666;
                }
            }
        }

        .img {
            image {
                width: 100%;
                border-radius: 20rpx;
            }
        }

        .time {
            font-size: 12px;
            color: #999999;
        }
    }
}

.footer {
    position: fixed;
    bottom: 0;
    width: calc(100% - 60rpx);
    background-color: #fff;
    padding: 30rpx 0;
}
</style>
